"use client"

import React, {useEffect, useState} from 'react'
import {queryAwardRecord} from '@/apis'
import {AwardRecordResponseDTO} from "@/types/AwardRecordResponseDTO";
interface RaffleAwardRecordPageProps {
    refresh?: number;
}
export function RaffleAwardRecordPage({refresh}: RaffleAwardRecordPageProps) {
    const [records, setRecords] = useState<AwardRecordResponseDTO[]>([]);
    const [loading, setLoading] = useState(true);


    // 查询中奖记录
    const queryAwardRecordHandle = async () => {
        try {
            setLoading(true);
            const queryParams = new URLSearchParams(window.location.search);
            const userId = String(queryParams.get('userId'));
            const result = await queryAwardRecord({userId});
            const {code, data} = await result.json();
            if (code === "0000") {
                setRecords(data);
            } else {
                console.error("查询中奖记录失败:", code);
            }
        } catch (error) {
            console.error("查询中奖记录失败:", error);
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => {
        queryAwardRecordHandle();
        // 每1分钟自动刷新
        const interval = setInterval(queryAwardRecordHandle, 60000);
        return () => clearInterval(interval);
    }, [refresh])

    if (loading) {
        return <div className="text-center py-8">加载中...</div>;
    }

    // ... 其他代码保持不变 ...

    // ... 其他代码保持不变 ...

    return (
        <div className="p-4 h-full flex flex-col w-full">
            <div className="flex justify-between items-center mb-4">
                <h2 className="text-xl font-bold">我的中奖记录</h2>
                <button 
                    onClick={queryAwardRecordHandle}
                    disabled={loading}
                    className="px-3 py-1 bg-blue-500 text-white rounded text-sm hover:bg-blue-600 disabled:bg-gray-400 disabled:cursor-not-allowed"
                >
                    {loading ? '刷新中...' : '刷新'}
                </button>
            </div>
            <div className="bg-white rounded-lg shadow overflow-hidden flex-1 w-full">
                <div className="overflow-y-auto  h-[500px]  w-full">
                    <table className="w-full divide-y divide-gray-200">
                        <thead className="bg-gray-50 sticky top-0 z-10">
                        <tr>
                            <th className="px-5 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-2/5">奖品名称</th>
                            <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-2/5">中奖时间</th>
                            <th className="px-1 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/5">状态</th>
                        </tr>
                        </thead>
                        <tbody className="bg-white divide-y divide-gray-200">
                        {records.map((record, index) => (
                            <tr key={index} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
                                <td className="px-5 py-4 text-sm font-medium text-gray-900 truncate max-w-[200px]" title={record.awardTitle}>
                                    {record.awardTitle}
                                </td>
                                <td className="px-4 py-5 text-sm text-gray-500">
                                    {new Date(record.awardTime).toLocaleString()}
                                </td>
                                <td className="px-1 py-5 text-sm">
                                <span className={`px-1 inline-flex text-xs leading-5 font-semibold rounded-full 
                                    ${record.awardState === "completed" ? 'bg-green-100 text-green-800' : 
                                      record.awardState === "create" ? 'bg-yellow-100 text-yellow-800' : 
                                      'bg-gray-100 text-gray-800'}`}>
                                    {record.awardState === "completed" ? '已发放' : 
                                     record.awardState === "create" ? '待发放' : 
                                     record.awardState || '未知状态'}
                                </span>
                                </td>
                            </tr>
                        ))}
                        </tbody>
                    </table>
                    {records.length === 0 && (
                        <div className="text-center py-8 text-gray-500">暂无有效中奖记录</div>
                    )}
                </div>
            </div>
        </div>
    );

}